<template>
	<view class="container">
		<!-- 我的雇员列表 -->
		<view class="list">
			<view class="black-list-info" v-for="(item,index) in blackList" :key="index">
				<view class="black-list-info-view" @click="handleOpenDetail(item.toUserId,item.id)">
					<view class="staff-infos-items-vip-crown" :class="{'vip-avatar':item.vipflag==1}">
						<image :class="item.vipflag==0?'black-list-info-avatar':'avatar-pic-vip'"
							:src="imgPath + item.avatar" mode="aspectFill"></image>
						<view v-if="item.vipflag" class="vip-crown">
							<image src="http://images.linglinggong.net/static/icon3/adasdasd.png" mode="aspectFill">
							</image>
							<text>金牌</text>
						</view>
					</view>
					<view class="black-list-info-views">
						<view class="black-list-info-name-views">
							<text class="black-list-info-name">{{item.username}}</text>
							<view v-if="item.sex==0" class="sex-nan">
								<image class="sex-image" src="http://images.linglinggong.net/static/icon3/nna1111.png"
									mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
							<view v-if="item.sex==1" class="sex-nv">
								<image class="sex-image" src="http://images.linglinggong.net/static/icon3/nv111.png"
									mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
						</view>
						<view class="cxDiv">
							<view class="cx">
								<text>评分</text>
								<text>{{ item.employeeRating}}</text>
							</view>
							<text class="fg">|</text>
							<view class="cx">
								<text>好评率</text>
								<text>{{ item.haoping }}%</text>
							</view>
						</view>
					</view>
				</view>
				<view class="black-list-info-button" @click="Kick_black(item.id)">移除黑名单</view>
			</view>
		</view>
		<!-- 加载 -->
		<!-- <uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more> -->
	</view>
</template>
<script>
	import {
		he_evaluate_lv,
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				hasFlag: false, //是否加载完成
				requestObj: {
					pageNum: 1,
					pageSize: 1000,
				},
				blackList: [], //雇员列表
				imgPath: '', //图片服务器路径
			}
		},
		methods: {
			async my_blackList() {
				let res = await this.$fetch(this.$api.black_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				res.rows.forEach(v => {
					let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
					if (haoping.indexOf(v.userId) != -1) {
						v.haoping = haoping[haoping.indexOf(v.userId) + 1]
					} else {
						he_evaluate_lv(v.userId).then((v) => {
							v.haoping = v
						})
					}
				})
				this.blackList = res.rows
				console.log(this.blackList, '黑名单');
			},
			async Kick_black(id) {
				let res = await this.$fetch(this.$api.Kick_black, {
					Id: id
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.showToast({
					title: '已移除成功',
					icon: 'none'
				})
				this.my_blackList()
			},
			handleOpenDetail(staffId, id) {
				uni.navigateTo({
					url: '/pages/employer-detail/employee-detail?staffId=' + staffId + '&isBlackPage=' + true +
						'&BlackId=' + id
				})
			},
		},
		onShow() {
			this.my_blackList()
		},
		onLoad() {
			this.imgPath = uni.getStorageSync('imgPath')
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.container {
		overflow: hidden;
	}

	.list {
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}

	.black-list-info {
		width: 720rpx;
		height: 168rpx;
		background: #FFFFFF;
		margin-left: 30rpx;
		border-bottom: 1rpx #F0F0F0 solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.black-list-info-avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.black-list-info-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #3E220A;
		line-height: 45rpx;
	}

	.black-list-info-button {
		width: 160rpx;
		height: 60rpx;
		background: #FCC928;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #402110;
		line-height: 60rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.black-list-info-view {
		width: 560rpx;
		display: flex;
		align-items: center;
	}

	.sex-nan {
		width: 73rpx;
		height: 32rpx;
		background: #1CAAEA;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-nv {
		width: 73rpx;
		height: 32rpx;
		background: #F90865;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-image {
		width: 17rpx;
		height: 17rpx;
		margin-right: 9rpx;
	}

	.black-list-info-name-views {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.black-list-info-views {
		margin-left: 30rpx;
		height: 108rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.fg {
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 49rpx;
		margin: 0 20rpx;
	}

	.cx {
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 49rpx;

		&>text:nth-last-child(1) {
			color: #FE4B28;
			margin-left: 8rpx;
		}
	}

	.cxDiv {
		display: flex;
		flex-direction: row;
	}

	.staff-infos-items-vip-crown {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 108rpx;
		height: 108rpx;
	}

	.vip-crown {
		// width: 148rpx;
		padding: 0 10rpx;
		height: 32rpx;
		background: linear-gradient(0deg, #111832, #343B54);
		border-radius: 16rpx;
		position: absolute;
		top: 78rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		&>text {
			font-size: 20rpx;
			font-weight: 500;
			color: #FCC928;
			line-height: 32rpx;
		}
	}

	.avatar-pic-vip {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		border: 3rpx solid #FCC928;
	}

	.vip-avatar {
		width: 130rpx;
		height: 130rpx;
		background-image: url(http://images.linglinggong.net./static/icon3/7868789.png);
		background-size: cover;
	}
</style>